<template>
  <div>
    <div class="main_navigator fCenterY">
     <div>
       <i class="el-icon-back"></i>
       <span class="navigator_span" @click="goBack">返回</span>
       &nbsp;&nbsp;
       <span style="color:#d4d4d4">|</span>
      </div>&nbsp;&nbsp;&nbsp;
      <el-breadcrumb aseparator=">" separator-class="el-icon-arrow-right" style="font-size:16px;">
        <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span :class="active_crumb">{{crumbTwo}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_content" style="padding-top:0 !important">
      <div class="name">
        <div style="display:flex;padding:8px 0 8px 15px">
          <div>
            <span>总监：</span>
            <span>{{user_all}}</span>
          </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div>
            <span>项目名称：</span>
            <span>{{project_name_record}}</span>
          </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div>
            <span>编号：</span>
            <span>{{project_number}}</span>
          </div>
        </div>
        <el-row style="padding:8px 0 8px 15px">
           <span>
            团队成员：
            <span>{{agency}}</span>
            <span>{{user_all2}}</span>
            <span>{{symbol}}</span>

            <span>{{engineer}}</span>
            <span>{{user_all3}}</span>
            <span>{{symbol3}}</span>

            <span>{{supervisor}}</span>
            <span>{{user_all4}}</span>
            <span>{{symbol4}}</span>
          </span>
        </el-row>
      </div>
      <div class="select">
        <div>
          <el-form id="sys_projectDetails" :model="searchForm" :inline="true" ref="searchForm" size="mini">
            <el-form-item prop="theDate">
              <el-date-picker
                v-model="searchForm.theDate"
                unlink-panels
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                >
              </el-date-picker>
              <!-- <el-input
                style="width:200px;"
                clearable
                v-model="searchText"
                placeholder="请输入查询关键字"
                @keydown.enter.native="doSearch()"
              ></el-input> -->
              <el-button type="primary" @click="doSearch()" class="added">
                <i class="el-icon-search"></i>
                搜索
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-if="showBack" @click="doReturn()">
                <i class="el-icon-back"></i>
                返回
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <myTable
          ref="mytable"
          auto='getAllList'
          :height=" Height-330"
          min-width='130'
          :myColumn=tableProp
          ahide='index,checkbox,mySplitPage,tooltip,background'
          hide='checkbox'
          slots='操作,250,right'
          @select='chooseItem'
          hook:created=' myTable.tableData = tableData '
        >
          <template slot-scope='button'>
<!--              <el-button type="success" size="mini" @click="handleLook(button.scope.$index, button.scope.row)">-->
<!--                <i class="el-icon-view"></i>-->
<!--                查 看-->
<!--              </el-button>-->

              <el-button type="success" size="mini" @click="handleLook1(button.scope.$index, button.scope.row)">
                <i class="el-icon-tickets"></i>
                打 印
              </el-button>

           <el-button
             v-if="button.scope.row.stationType == 11 || button.scope.row.stationType == 12
          || button.scope.row.stationType == 13 || button.scope.row.stationType == 111 || button.scope.row.stationType == 112 || button.scope.row.stationType == 113
          || button.scope.row.stationType == 114 || button.scope.row.stationType == 115 || button.scope.row.stationType == 116 || button.scope.row.stationType == 117
          || button.scope.row.stationType == 118 ||  button.scope.row.stationType == 119 || button.scope.row.stationType == 120 || button.scope.row.stationType == 121
          || button.scope.row.stationType == 122"
             type="primary" size="mini" @click="doDaochu(button.scope.$switch, button.scope.row)">
              <i class="el-icon-download"></i>
              导 出
            </el-button>
          </template>
        </myTable>
      </div>
    </div>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../../utils/myhttp";
import qs from "qs";
import api from "../../utils/api";
var P;
const arr = ['symbol4','symbol3','symbol','supervisor','engineer','agency','user_all3','user_all4','user_all','project_name_record','project_number','project_id','user_all2'];
export default {
  data() {
    return {
      tableHeaderStyle: {
        //表头样式
        "background-color": "rgb(242,242,242)"
      },
      active_crumb: "active_crumb", //面包屑当前颜色
      crumbOne: "项目信息汇总",
      crumbTwo: "详情",
      tableData: [],
      loading: "",
      tableProp: [
        { label: "旁站记录表", prop: "stationType", html(prop) {
          return $.class[prop]||'';
        } },
        { label: "旁站开始时间", prop: "startTime", sort:true },
        { label: "旁站结束时间", prop: "modifyTime", sort:true },
      ],
      user_all: '',
      project_name_record: '',
      project_number: '',
      project_id: '',
      user_all2:'',
      user_all3:'',
      user_all4:'',
      agency:'',
      engineer:'',
      supervisor:'',
      symbol:'',
      symbol3:'',
      symbol4:'',
      res:'http://47.104.23.200:8014/yz_file/word/',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchForm:{
        theDate:'',
      },
      searchText:'',
      showBack:false,
    };
  },
  components: {},
  methods: {
    // 选中
    chooseItem(val) {
      let a  = val.filter((v,i)=>{
        if  (v.stationType == 11 || v.stationType == 12 || v.stationType == 13 ||
             v.stationType == 111 || v.stationType == 112 || v.stationType == 113 || v.stationType == 114 ||
             v.stationType == 115 || v.stationType == 116 || v.stationType == 117 || v.stationType == 118 ||
             v.stationType == 119 || v.stationType == 120 || v.stationType == 121 || v.stationType == 122){
          return
        }else {
          return v
        }
      })
      this.$refs.mytable.mytable(a)
      this.dataListSelections = val
    },
    doReturn(){
      this.$refs.searchForm.resetFields();
      this.getAllList();
      this.showBack = false;
    },
    //模糊搜索
    doSearch(){
      this.getAllList();
      this.showBack = true;
    },
    doDaochu: async function(index,row) {
      // if (row.updateState != 1) return $.msgWarning('此旁站还未完成，请稍后再试！');

      var res = await $.post('createWorld',{
        stationId: row.stationId,
        stationType: row.stationType,
      });
      if(!res.success) return $.msgError(res.msg||'error!');
      myhttp.downloadFile( res + res.items, "");
    },
    handleLook(index,row) {
      this.$router.push({
        name: 'tableDetails3',
        params: P.with({
          station_id: row.stationId,
          station_type: row.stationType,
          isprinttables:false
          // programme_name: row.programmeName,//工程名称
          // project_name: row.projectName,//项目名称
        }),
      });
    },
    handleLook1(index,row) {
      this.$router.push({
        name: 'tableDetails3',
        params: P.with({
          station_id: row.stationId,
          station_type: row.stationType,
          isprinttables:true
          // programme_name: row.programmeName,//工程名称
          // project_name: row.projectName,//项目名称
        }),
      });
    },

    goBack() {
      // this.$router.go(-1);
      this.$router.push({name:"projectManagement3"});
    },
     openLoading() {
      //loading请求等待
       this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    getAllList: async function(pageNum,pageSize) {//getStationByProjectId
      var res = await $.post('getStationByProjectIdPc',{
        pageNum,
        pageSize,
        projectId: this.project_id,
        startTime: this.searchForm.theDate[0], //开始日期
        endTime: this.searchForm.theDate[1], //结束日期
        singleProject:null
      });
      /* res.items = mapArr(res.items,v=>{
        if( v.isSecond==1 ) return v;
        res.total--;
      }); */
      // console.error(res);
      $return('__',res);
      if(!res.success) return $.msgError(res.msg||'error!');
    }
  },
  created() {
    P = this.$route.params;
    if ( G.isEmpty(P) ) {
      arr.forEach(v=>{
        this[v] = localStorage.getItem(v);
      });
    }else {
      arr.forEach(v=>{
        localStorage.setItem( v, this[v] = P[v] );
      });
    };
  },
  destroyed() {
    // G.clearLocal(arr);
  },
  mounted() {}
};
</script>
<style scoped>
  .name{
    border:1px solid #d4d4d4;
  }
  .name .el-row:first-child,.name .el-row:nth-child(2){
    padding:10px 0 10px 20px;
  }
  .el-row:nth-child(2){
    border-top:1px solid #d4d4d4;
  }
  .select{
    border-left:1px solid #d4d4d4;
    border-right:1px solid #d4d4d4;
    border-bottom:1px solid #d4d4d4;
    padding:1px 8px 80px 8px;
  }
  .active_crumb {
    color: rgb(90, 160, 230);
  }
</style>


